<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,div{
				margin: 0;
				padding: 0;
				
			}
			body{
				background:#ed5565;
				padding:50px;
			}
			.box{
				width:100px;
				height: 100px;
				/*border: 1px solid red;*/
				display: flex;
				justify-content:space-around;
				align-items:center;
				margin: 100px auto;
			}
			.box1{
				width:20px;
				height: 20px;
				background:#fff;
				border-radius: 50%;
				animation:move 0.7s linear infinite;
			}
			@keyframes move{
				from{transform:scale(1);}
				to{transform:scale(0.7);}
			}
			.box1:nth-of-type(1){
				animation-delay:-0.2s;
			}
			.box1:nth-of-type(2){
				animation-delay:-0.4s;
			}
			.box1:nth-of-type(3){
				animation-delay:-0.6s;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
		</div>
	</body>
</html>
